class Vue {
    constructor(obj) {
        // 初始化生命周期
        this.beforeCreate = obj.beforeCreate
        this.created = obj.created
        this.beforeMount = obj.beforeMount
        this.mounted = obj.mounted

        // 1、数据挂载阶段，把data配置项中的每个属性挂载到vue对象上
        // 挂载前
        this.beforeCreate && this.beforeCreate()
        // 循环vm.data
        for (let key in obj.data) {
            // 保存msg的值
            let val = obj.data[key]
            // Object.defineProperty(obj, prop, descriptor)
            // obj: 要在其上定义属性的对象。
            // prop: 要定义或修改的属性的名称。
            // descriptor: 将被定义或修改的属性的描述符。
            Object.defineProperty(this, key, {
                set: function (newVal) {
                    console.log('修改了', key)
                    val = newVal
                },
                get: function () {
                    return val
                }
            })
        }
        // 挂载后
        this.created && this.created()


        // 模板渲染
        this.beforeMount && this.beforeMount()
        // 获取需要渲染的标签
        let box = document.querySelector(obj.el)

        let str = box.innerHTML
        // console.log(box.innerHTML);
        // 循环data里面的key
        for (let key in obj.data) {
            str = str.replace(new RegExp('{{' + key + '}}', 'g'), obj.data[key])
        }
        box.innerHTML = str

        // 渲染后
        this.mounted && this.mounted()
    }
}